<template>
  <button
    v-for="(_, tab) in tabs"
    :key="tab"
    :class="['tab-button', { active: currentTab === tab }]"
    @click="currentTab = tab"
  >
    {{ tab }}
  </button>
  <hr />
  <KeepAlive >
    <component :is="tabs[currentTab]" class="tab"></component>
  </KeepAlive>
</template>     <data value=""></data>

<script setup>
import { ref } from 'vue'
import game from './components/game.vue'
import todoList from './components/todo-list.vue';


// 设置默认激活的案例
const currentTab = ref('game')

// 把案例组件组织为tabs对象
const tabs = {
  game,
  todoList
}
</script>


